<!-- 疾病管理 -->
<template>
  <div>
    <ContainerSlot>
      <template slot="searchModule">
        <SearchForm :label-width="labelWidth" :form-config="formConfig" :form-data="formData" :slot-list="slotList">
          <template slot="searchBtn">
            <el-button type="primary" @click.prevent="search()"> 查询 </el-button>
          </template>
        </SearchForm>
      </template>

      <template slot="operationModule">
        <el-button type="primary" @click="add">添加</el-button>
        <el-button type="danger"  @click="delSelectData"> 删除 </el-button>
      </template>

      <template slot="contentModule">
        <Table :prop-list="propList" :list-data="tableData" ref="table" @append="handleAppend" @handleSelectionChange="handleSelectionChange">
          <template slot="diagnosisItemSymbolList" slot-scope="{row}">
            <span v-for="item,index in row.diagnosisItemSymbolList" :key="index" >{{item}} <br> </span>
            <!-- {{row.diagnosisItemSymbolList}} -->
          </template>
          <template slot="operation" slot-scope="{row}">
             <el-button class="opt" type="primary" v-show="row.diseaseName" plain @click="edit(row)">
                <i class="el-icon-edit-outline"></i>编辑
              </el-button>
              <el-button class="opt" type="danger" v-show="row.diseaseName" plain @click="del(row)">
                <i class="el-icon-delete"></i>删除
              </el-button>
          </template>
        </Table>
      </template>
      <!-- 分页器 -->
      <template slot="footerModule">
        <el-pagination :current-page="currentPage" background :page-size="pageSize" 
        :page-sizes="[10, 20, 30]" layout=" prev, pager, next, jumper" :total="total" 
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </template>
    </ContainerSlot>

    <!-- 对话框 -->
    <el-dialog :close-on-click-modal='false' :title="`疾病信息${title}`" :visible.sync="dialogFormVisible" top="30vh" @close="cancle">
      <!-- 表单收集 -->
      <el-form ref="ruleForm" :inline="true" :model="toform" :rules="rules">

        <el-form-item label="疾病名称：" :label-width="formLabelWidth" prop="diseaseName">
          <el-input v-model="toform.diseaseName" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="关联品种：" :label-width="formLabelWidth" prop="fishVarietyId">
          <el-select v-model="toform.fishVarietyId" placeholder="请选择" clearable>
            <el-option v-for="item of FishVarietyList"
              :key="item.fishVarietyId"
              :label="item.varietyName"
              :value="item.fishVarietyId"
               />
          </el-select>
        </el-form-item>

        <el-form-item label="诊断项症状：" :label-width="formLabelWidth" prop="diagnosisItemSymbolNoList" >
          <!-- <el-tooltip :content="toform.diagnosisItemSymbolNoList" disabled> -->
            <el-select v-model="toform.diagnosisItemSymbolNoList" filterable clearable multiple popper-class="dItemSymbolNoList" style="width:520px" ref="kkkk">
              <el-option
                v-for="item of DiseaseFeaturesManageList"
                :key="item.diagnosisItemSymbolNo"
                :label="`${item.diagnosisItemSymbolNo}:(${item.diagnosisItemName})--${item.diagnosisItemSymbolDesc}`"
                :value="item.diagnosisItemSymbolNo"
                @mouseover.native="showAddress(item.diagnosisItemSymbolDesc)"
                @mouseout.native="closeShowAddress">
                <!-- 列表数据 -->
                {{`${item.diagnosisItemSymbolNo}:(${item.diagnosisItemName})--${item.diagnosisItemSymbolDesc}`}}
                <!-- 提示框 -->
                <div v-show="isshow"  class="dsdTooltip"> {{diagnosisItemSymbolDesc}} </div>
              </el-option>
            </el-select>
          <!-- </el-tooltip> -->
        </el-form-item>

        <el-form-item label="特殊症状描述："  class="w100p" prop="mainSymptoms" >
          <el-input v-model="toform.mainSymptoms" type="textarea" clearable :rows="2" class="fff" show-word-limit maxlength="127"/>
        </el-form-item>

        <el-form-item label="预防方法：" class="w100p" prop="preventionMethod">
          <el-input v-model="toform.preventionMethod" type="textarea" clearable :rows="2" show-word-limit maxlength="127"/>
        </el-form-item>

        <el-form-item label="治疗方法：" class="w100p" prop="therapeuticMethod">
          <el-input v-model="toform.therapeuticMethod" type="textarea" clearable :rows="2" show-word-limit maxlength="127"/>
        </el-form-item>
        
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="save('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import ContainerSlot from '@/components/Container'
import SearchForm from '@/components/Form'
// import Table from '@/components/Table'
import Table from './components/table.vue'
import DiseaseManageApi from "@/api/disease-bank-manage/disease-manage/index";                  // 疾病管理
import FeaturesTypeManageApi from "@/api/disease-bank-manage/features-type-manage/index";       // 诊断项
import DiseaseFeaturesManageApi from "@/api/disease-bank-manage/disease-features-manage/index"; // 诊断项症状
import FishVarietyApi from "@/api/fishVariety/index";                                           // 鱼类品种管理

export default {
  name: '',
  components: { ContainerSlot, SearchForm, Table },
  data() {
    return {
      isshow:false,               // 诊断项症状提示框 显示/隐藏
      diagnosisItemSymbolDesc:'', // 诊断项症状提示框功能
      title: '添加',
      // 分页
      total: 1,        // 总条数
      currentPage: 1,  // 当前页
      pageSize: 10,    // 每页条数
      propList: [
        { prop: 'diseaseName', label: '疾病名称', minWidth: '120' },
        { prop: 'diagnosisItemSymbolNoList', label: '诊断项症状编号',minWidth: '120' },
        { label: '诊断症状描述',minWidth: '200',slotName: 'diagnosisItemSymbolList'  },
        { prop: 'mainSymptoms', label: '特殊症状描述',minWidth: '120' },
        { prop: 'preventionMethod', label: '预防方法',minWidth: '120' },
        { prop: 'therapeuticMethod', label: '治疗方法',minWidth: '120' },
        { label: '操作', minWidth: '180', slotName: 'operation' }
      ],
      tableData: [],       // 表格数据
      idList: [],          // 表格所选行的id数组，用于批量删除
      labelWidth: '100px', // 表单项宽度
      // 查询栏 - 表单配置
      formConfig: [
        {
          label: '疾病名称',
          prop: 'diseaseName',
          type: 'input',
          width: '150px'
        }
      ],
      // 查询栏 - 表单数据
      formData: {
        diseaseName: ''
      },
      // 插槽
      slotList: [
        {
          slotName: 'searchBtn'
        }
      ],
      // 对话框显示/隐藏
      dialogFormVisible: false,
      formLabelWidth: '120px',
      // 对话框-保存/修改表单收集
      toform: {
        diseaseName:'',                  // 疾病名称
        fishVarietyId:0,                 // 关联品种
        diagnosisItemSymbolNoList:[],    // 诊断项症状 
        mainSymptoms:'',                 // 主要症状描述
        preventionMethod:'',             // 预防方法
        therapeuticMethod:'',            // 治疗方法
      },
      // 鱼类品种
      FishVarietyList:[],
      // 诊断项症状
      DiseaseFeaturesManageList: [],
      // 表单验证
      rules: {
        diseaseName: [ // 疾病名称
          { required: true,message: "请输入",trigger: ["blur"] },
        ],
        fishVarietyId: [ // 关联品种
          { required: true,message: "请选择",trigger: ["blur","change"] },
        ],
        diagnosisItemSymbolNoList:[ // 诊断项症状
          { required: true,message: "请选择",trigger: ["blur"] },
        ],
        // mainSymptoms: [
        //   { message: "请输入", trigger: ["blur"] },
        // ],
      },
    }
  },
  created(){
    this.diseaseManagement()   // 疾病管理
    this.queryDiseaseTpye()    // 获取诊断项症状
  },
  mounted() {
    this.qureyFishVariety()
  },
  methods: {
    // 诊断项症状：鼠标移入显示提示框
    showAddress(diagnosisItemSymbolDesc) {
      this.diagnosisItemSymbolDesc = diagnosisItemSymbolDesc
      this.isshow=true
      // console.log(this.toform.diagnosisItemSymbolNoList);
      // console.log(this.$refs.kkkk._props.value);
    },
    // 诊断项症状：鼠标移出隐藏提示框
    closeShowAddress(){
      this.isshow=false
    },
     handleAppend(row) {
      this.$nextTick(() => {
        // 将新增行插入到数据源的首位
        this.tableData.unshift(row)
        // 设置当前选中行为新增行
        this.$refs.table.setCurrentRow(this.tableData[0])
      })
    },
    // 获取诊断项症状
    async queryDiseaseTpye() {
      const res = await DiseaseFeaturesManageApi.queryByCondition({});
      this.DiseaseFeaturesManageList = res.data;
    },
    // 获取鱼类品种
      qureyFishVariety() {
      FishVarietyApi.queryByCondition().then((res) => {
        this.FishVarietyList = res.data;
      });
    },
     // 查询
    search() {
      this.currentPage=1
      this.diseaseManagement( )
    },
    // 疾病管理
    async diseaseManagement(){
      let params = {
        page: this.currentPage, // 当前页
        size: this.pageSize,    // 每页条数
        condition:this.formData
      };
      let res=await DiseaseManageApi.queryPageByCondition(params)
      console.log('疾病管理res',res);
      if (res.code==200) {
        this.tableData=res.data.content  
        this.total=res.data.totalElements
      }else{
        this.$message.error(res.code)
      }
      console.log('res***',res);
    },
    // 当前页
    handleCurrentChange(e) {
      this.currentPage = e
      this.diseaseManagement()
      console.log(`当前第${e}页`);
    },
    // 
    handleSizeChange(e) {
      this.pageSize = e
    },
    // 添加
    add() {
      console.log( this.tableData);
      this.title = '添加'
      this.dialogFormVisible = true
      this.toform={}
      this.$refs.ruleForm.resetFields()
    },
    // 修改
    edit(row) {
      this.toform = JSON.parse(JSON.stringify(row));
      this.toform.diagnosisItemSymbolNoList=this.toform.diagnosisItemSymbolNoList.split(',')
      console.log(row);
      this.title = '修改'
      this.dialogFormVisible = true
      // this.toform={...row}
    },
    // 对话框 - 添加/修改表单
    save(){
       this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            if (this.title === '添加') {
              this.toform.diagnosisItemSymbolNoList = this.toform.diagnosisItemSymbolNoList.join(",");
              let res=await DiseaseManageApi.add(this.toform)
              if (res.code==200) {
                this.$message.success('添加成功！')
                this.diseaseManagement()
                this.dialogFormVisible = false // 关闭对话框
              }
              console.log(res);
            }
            if (this.title === '修改') {
              this.toform.diagnosisItemSymbolNoList = this.toform.diagnosisItemSymbolNoList.join(",");
              let res=await DiseaseManageApi.edit(this.toform)
              if (res.code==200) {
                this.$message.success('修改成功！')
                this.diseaseManagement()
                this.dialogFormVisible = false // 关闭对话框
              }
            }
          } else {
            return false;
          }
        });
    },
    // 删除单条数据
    del(row) {
      console.log('当前删除的',row);
       this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(async() => {  
          let res=await DiseaseManageApi.delById(row.diseaseBankId)
          console.log('---',res);
          if (res.code==200) {
            if (this.total%this.pageSize==1&&this.currentPage!=1) {
              this.currentPage=this.currentPage-1
            }
            this.diseaseManagement()
            this.$message({ type: 'success', message: '删除成功!' });
          }else{
            this.$message.error(res.code)
          }
        })
        .catch(() => {
          this.$message({ type: 'info', message: '已取消删除' });          
        });
    },
    // 当表格的选择项发生变化时触发
    handleSelectionChange (selectData) {  
      this.idList = []  
      selectData.forEach(item => {    
        item.diseaseBankId && this.idList.push(item.diseaseBankId) 
        console.log('当前的item',item);
      });
      console.log('this.idList',this.idList)
    },
    // 批量删除
    delSelectData () {
      if (!this.idList.length) {
        return
      }
      this.$confirm('您确定删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DiseaseManageApi.delListById(this.idList).then(res => {
          if (res.code == 200) {
            this.diseaseManagement()
            this.$message({type: 'success',message: '删除成功!'});
          } else {
            this.$message.error(res.code)
          }
        })
      }).catch(() => {
        this.$message({type: 'info',message: '已取消删除'});
      });
    },
    // 取消按钮
    cancle() {
      this.dialogFormVisible = false
      this.$nextTick(()=>{
        this.$refs.ruleForm.resetFields()
      })
    },
   
  }
}
</script>

<style lang="scss" scoped>
// dialog框header背景色
::v-deep .el-dialog__header {
  background: #0480fb;
}
// 设置dialog框叉号颜色
::v-deep .el-dialog__close {
  color: #fff;
}
// dialog框标题颜色
::v-deep .el-dialog__title {
  color: #fff;
}

::v-deep .w100p>:nth-child(2) {
  width: 100%;
}
/* 诊断项症状下拉框 */
::v-deep .el-tag--info .el-select__tags-text{
      display: inline-block;
      max-width: 130px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
}
/* 诊断项症状下拉列表的提示信息 */
.dsdTooltip{
  position: fixed;
  top: 0vh;
  left: 50%;
  transform: translate(-50%,0);
  white-space: pre-wrap;
  padding: 0px 20px;
  border-radius: 30px;
  font-size: 20px;
  background: rgb(255,255,255);
  color: rgb(64,158,255);
  border: 2px solid rgb(220, 230, 190);
}
  /* 特征描述文本域 */
   ::v-deep .el-textarea {
    position: relative;
    /* 特征描述文本域-文本框 */
    .el-textarea__inner{
    }
    /* 特征描述文本域-限制字数 */
    .el-input__count{
      position: absolute;
      bottom: -20px;
      line-height: 12px;
    }
  }
</style>

<style>
/* 诊断项症状下拉列表 */
.dItemSymbolNoList{
  width: 100px;
}
/* 诊断项症状下拉列表 每行 */
/* .dItemSymbolNoList .el-select-dropdown__item{
  overflow-x: scroll ;
} */
/* 设置滚动条 */
/* .dItemSymbolNoList .el-select-dropdown__item::-webkit-scrollbar-thumb{
  background: rgb(186, 212, 240);
} */
</style>